<template>
	<view class="box">
		<!-- 头部 -->
		<view class="head flex">
			<view class="input f-w">
				<view class="input-img f-w">
					<image src="https://jw.xzsw2021.com/static/index/icon_32@2x.png" mode=""></image>
				</view>
				<input type="text" v-model="keyword" placeholder="请输入商品搜索" @confirm="search" confirm-type="search">
				<view class="input-btn" @click="search">搜索</view>
			</view>
			<view class="lingquan" @click="goQuan">
				<view class="head-img f-w">
					<image src="https://jw.xzsw2021.com/static/client/icon_75@2x.png" mode=""></image>
				</view>
				<view>领券</view>
			</view>
		</view>
		<!-- 店铺主体信息 -->
		<view class="content">
			<!-- 店铺信息 -->
			<view class="top f-w">
				<view class="top-img">
					<image :src="info.mer_avatar" mode=""></image>
				</view>
				<view class="top-right">
					<view class="top-one f28 bold">
						{{info.mer_name}}
					</view>
					<view class="top-two f-w f22">
						<view v-if="info.time_delivery">{{info.time_delivery}}分钟</view>
						<view v-else>{{time}}分钟</view>
						<view class="icon1"></view>
						<view>运费 ￥{{info.distribution_fee}}</view>
						<view class="icon1"></view>
						<view>起送￥{{info.starting_price}}</view>
					</view>
					<view class="top-three f-w" v-if="couponlist.length>0">
						<view :class="item.issue?'tag2':'tag1'" v-for="(item,index) of couponlist" :key="index">
							{{item.issue?`已领${item.coupon_price}元券`:`领${item.coupon_price}元叠加券`}}
						</view>
					</view>
					<view class="collection f-w">
						<image :src="serverUrl+'https://jw.xzsw2021.com/static/client/icon_76@2x.png'" @click="shouCang"
							mode="" v-if="!info.care"></image>
						<image :src="serverUrl+'https://jw.xzsw2021.com/static/client/icon_87@2x.png'"
							@click="cancelshouCang" mode="" v-else>
						</image>
					</view>
				</view>
			</view>
			<!-- 商品分类 -->
			<view class="cate f-w">
				<view :class="cate_active===index?'cateColr':''" v-for="(item,index) of cate_list" :key="index"
					@click="checkCate(index)">
					<view class="cate-img f-w">
						<image :src="item.pic" mode=""></image>
					</view>
					<view class="cate-name">{{item.cate_name}}</view>
				</view>
			</view>
			<!-- 分类信息 -->
			<view class="list flex">
				<!-- 二级分类 -->
				<view class="cate2">
					<view :class="cate2_active===index?'cate2Color':''" v-for="(item,index) of cate2_list" :key="index"
						@click="checkCate2(index)">
						<view>{{item.cate_name}}</view>
						<!-- 背景 -->
						<view class="bg"></view>
					</view>
					<!-- 占位盒子 -->
					<view style="height: 100rpx;"></view>
				</view>
				<!-- 商品信息 -->
				<view class="msg">
					<!--  -->
					<view class="msg-head f-w">
						<view class="f-w" :class="cate3_active===index?'color':''" v-for="(item,index) of cate3"
							:key="index" @click="checkCate3(index)">
							<view>{{item.name}}</view>
							<!--  -->
							<view class="msg-head-img">
								<!-- 上图标 -->
								<view class="shang f-w">
									<!--  绿-->
									<image src="https://jw.xzsw2021.com/static/client/icon_sup.png" mode=""
										v-if="cate3[index].status==2">
									</image>
									<!-- 灰 -->
									<image src="https://jw.xzsw2021.com/static/client/icon_105@2x.png" mode="" v-else>
									</image>
								</view>
								<!-- 下图标 -->
								<view class="f-w">
									<image src="https://jw.xzsw2021.com/static/client/icon_106@2x.png" mode=""
										v-if="cate3[index].status==1">
									</image>
									<image src="https://jw.xzsw2021.com/static/client/icon_103@2x.png" mode="" v-else>
									</image>
								</view>
							</view>
						</view>
					</view>
					<!--  -->
					<scroll-view class="scroll" scroll-y="true" @scrolltolower="getMoreShopping">
						<view class="list2">
							<view class="card f-w" v-for="(item,index) in cate3_list" :key="index"
								@click="goShopingDetail(item.product_id)">
								<!-- 商品图片 -->
								<view class="card-img f-w">
									<image :src="item.image" mode=""></image>
								</view>
								<!-- 商品详细 -->
								<view class="card-right">
									<view class="one f28 bold hide-line">{{item.store_name}}</view>
									<view class="two">月销{{item.sales}}</view>
									<view class="three" v-if="item.product_type==1">秒杀限定1份</view>
									<view class="four fw-bt">
										<!-- 价格 -->
										<view class="four-left f-w">
											<view class="price1 f28 bold">￥{{item.price}}</view>
											<view class="price2"
												v-if="item.productAttrValue.attrValue.length && item.productAttrValue.attrValue[0].ot_price > 0">
												￥{{item.productAttrValue.attrValue[0].ot_price}}</view>
										</view>
										<!-- 购物-->
										<!-- <my-numberBox :info="item" @cartDel='cartDel(index)' @cartAdd='cartAdd(index)'></my-numberBox> -->

										<view class="cart1 f-w" @click.stop='setCartShowHide'>
											<rules :product_id="item.product_id" :callbackFunction='callbackFunction'>
												<view class="cart1-add f-w">
													<image src="https://jw.xzsw2021.com/static/client/icon_85@2x.png"
														mode=""></image>
														
												</view>
												
											</rules>
										</view>
									</view>
								</view>
							</view>
							<u-loadmore :status="productStatus" v-if="productStatus" />
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<!-- 购物车 -->
		<!-- <cart :list="carlist" @change='cartcancel' :mer_id='id' @buy='buying'></cart> -->
		<cart :list="carlist" @change='cartcancel' :mer_id='id' @buy='buying' v-if="isCartComponentHide"></cart>
		<!-- 优惠券 -->
		<coupons ref="coupons" :quan_list="couponlist" @getid='getid' :isShowCouponTabs='true' :mer_id='id'></coupons>
	</view>
</template>

<script>
	import cart from '@/components/cart.vue'
	import rules from '@/components/rules.vue'
	import {
		getMerchantProductSpuListApi
	} from '@/api/product'
	export default {
		components: {
			cart,
			rules
		},
		data() {
			return {
				id: '', //mer_id
				num: 0, //
				couponlist: [],
				isCartComponentHide: true,
				serverUrl: '', //服务器地址
				keyword: '', //
				cate_active: 0, //一级分类
				cate2_active: 0, //二级
				cate3_active: 0, //二级
				isUpdateClass: true, //是否变动了分类
				cate3: [{
						name: '销量',
						status: 0,
					},
					{
						name: '价格',
						status: 0,
					}
				], //
				choosecart: [],
				cate_list: [], //
				cate2_list: [], //二级分类
				cate3_list: [], //商品列表
				carlist: [], //购物车列表
				info: '',
				position: '',
				time: 0,
				productSpuSearch: {
					page: 1,
					limit: 6,
					isPush: true
				},
				productStatus: 'loading',
				couponType: 0, //优惠券类型  0店铺券，1商品券，2免运费 ，3满减券
			}
		},
		watch: {
			cate_active(e) {
				let children = [{
					cate_name: '全部',
					is_show: 1,
					pic: '',
					pid: '',
					sort: 0,
					store_category_id: this.cate_list[e].store_category_id
				}]
				children.push(...this.cate_list[e].children)
				this.cate2_list = children
				// this.cate2_list = this.cate_list[e].children
				console.log(this.cate2_list)
				this.cate2_active = 0
				this.getcate3()
			},
			cate2_active(e) {
				this.getcate3()
			}
		},
		onLoad(e) {
			this.id = e.id
			let that = this
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					let obj = {
						lng: res.longitude,
						lat: res.latitude
					}
					that.position = obj
					that.getshopinfo()

				},
			})
			this.getcate()
			this.getcoupon()

		},

		methods: {
			setCartShowHide() {
				// console.log(this.isCartComponentHide)
				// console.log('&&&&&&&&&&')
				// if (typeof this.isCartComponentHide == 'number') {
				// 	this.isCartComponentHide = true
				// } else {
				// 	this.isCartComponentHide = !this.isCartComponentHide
				// }
			},
			cartcancel(e) {
				this.choosecart = e
				this.getcate3()
			},
			setCartShow() {
				this.isCartComponentHide = !this.isCartComponentHide
			},
			callbackFunction() {
				console.log('callbackFunction')
				this.$parent.setCartShow()
				this.$parent.getMerProductSpuList(1)
			},

			// 获取购物车的列表
			getcartlist(arr, isOnAdd) {
				console.log(arr)
				this.carlist = [] //购物车列表
				let arr2 = []
				this.$request('user/cart/lst', {}, 'GET').then(res => {
					uni.hideLoading()
					if (res.status == 200) {
						let list = res.data.list
						console.log(list, '888888888888')
						list.forEach(item => {
							// if (item.mer_id == this.id) { //现在要求 店铺里面购物车也得显示其他店铺的商品
							item.list.forEach(items => {
								items.check = true
								let choosecart = this.choosecart
								choosecart.forEach(itemc => {
									if (itemc.cart_id == items.cart_id) {
										items.check = itemc.check
									}
								})
							})
							this.carlist.push(...item.list)
							// console.log(this.carlist,'this.carlistthis.carlistthis.carlist')
							// }
							item.list.forEach(item2 => {
								arr.forEach(item3 => {
									if (item2.product_id == item3.product_id) {
										item3.cartnum = item2.cart_num
										item3.cart_id = item2.cart_id
									}

								})
							})
						})
						// cate3_list 商品列表
						if (this.productSpuSearch.isPush && !isOnAdd) {
							this.cate3_list.push(...arr)
						} else if (!isOnAdd) {
							if (arr.length)
								this.cate3_list = arr
						}

						if (this.cate3_list.length < this.productSpuSearch.limit) {
							this.productStatus = 'nomore'
						}
						console.log(this.cate3_list, '000000000000000')

					}
				}).catch(err => {
					console.log(err)
					uni.hideLoading()
				})
			},
			// 获取店铺的分类的商品
			getcate3() {
				console.log("???")
				this.productSpuSearch.mer_cate_id = this.cate2_list[this.cate2_active].store_category_id
				this.cate3.forEach((val, key) => {
					if (val.status != 0) {
						if (key == 1) { //价格排序
							if (val.status == 1) {
								this.productSpuSearch.order = 'price_asc'
							} else {
								this.productSpuSearch.order = 'price_desc'
							}
						} else {
							if (val.status == 1) {
								this.productSpuSearch.order = 'sales_asc'
							} else {
								this.productSpuSearch.order = 'sales_desc'
							}
						}
					}
				})
				this.getMerProductSpuList()
			},
			// 购物车减去
			cartDel(e) {
				let list = this.cate3_list
				let item = list[e]
				uni.showLoading({
					mask: true
				})
				item.cartnum -= 1;
				this.productSpuSearch.isPush = false
				this.$request('user/cart/change/' + item.cart_id, {
					cart_num: item.cartnum
				}).then(res => {
					if (res.status == 200) {
						uni.showToast({
							title: res.message
						})
						this.getcate3()
						// list[e].cartnum--
						// this.cate3_list=list
						// this.$forceUpdate()

					}
				})
			},
			// 购物车加
			cartAdd(e) {
				let list = this.cate3_list
				let item = list[e]
				let data = {
					cart_num: 1,
					is_new: 0,
					product_attr_unique: item.productAttrValue.attrValue[0].unique,
					product_id: item.product_id,
					product_type: item.product_type
				}
				uni.showLoading({
					mask: true
				})
				this.productSpuSearch.isPush = false
				this.$request('user/cart/create', data).then(res => {
					if (res.status == 200) {
						uni.showToast({
							title: res.message
						})
						this.getcate3()
						list[e].cartnum++
						// this.cate3_list=list
						// this.$forceUpdate()

					}
				})
			},

			getid(e) {
				uni.showLoading({
					mask: true
				})
				this.$request('coupon/receive/' + e).then(res => {
					if (res.status == 200) {
						uni.hideLoading()
						let list = this.couponlist
						list.forEach(item => {
							if (item.coupon_id == e) {
								item.issue = {
									t: "x"
								}
							}
						})
						this.couponlist = list
						this.$forceUpdate()

					}
					this.getcoupon()
				})
			},
			// 此商店的优惠券
			getcoupon() {
				this.$request('coupon/store/' + this.id, {
					all: this.couponType
				}, 'GET').then(res => {
					res.data.forEach(item => {
						item.look = false
					})
					this.couponlist = res.data
					console.log(this.couponlist, '8888****************')
				})
			},
			// 获取店铺商店详情
			getshopinfo() {
				this.$request('store/merchant/detail/' + this.id, {}, 'GET').then(res => {
					this.info = res.data
					uni.setNavigationBarTitle({
						title: res.data.mer_name
					})
					this.getmin()
				})

			},
			// 获取店铺的分类
			getcate() {
				this.$request('store/merchant/category/lst/' + this.id, {}, 'GET').then(res => {
					this.cate_list = res.data
					let children = [{
						cate_name: '全部',
						is_show: 1,
						pic: '',
						pid: '',
						sort: 0,
						store_category_id: this.cate_list[0].store_category_id
					}]
					children.push(...this.cate_list[0].children)

					this.cate2_list = children
					this.getcate3()
				})
			},

			getmin() {
				uni.request({
					url: `https://restapi.amap.com/v4/direction/bicycling?origin=${this.position.lng},${this.position.lat}&destination=${this.info.long},${this.info.lat}&key=c858b6921758e3f3400070929386564c`, //仅为示例，并非真实接口地址。
					success: res => {
						this.time = parseInt(res.data.data.paths[0].duration / 60)
					}
				});

			},
			// 搜索
			search() {
				console.log(this.keyword);
				uni.navigateTo({
					url: '/pages/client/shop/shop-search/shop-search?id=' + this.id + '&shopname=' + this
						.info
						.mer_name + '&keyword=' + this.keyword
				})
			},
			// 领券
			goQuan() {
				this.$refs.coupons.cpopOpen(this.id)
			},
			// 收藏
			shouCang() {
				let data = {
					type: 10,
					type_id: this.id
				}
				uni.showLoading({
					mask: true
				})
				this.$request('user/relation/create', data).then(res => {
					if (res.status == 400 || res.status == 200) {
						uni.hideLoading()
						this.getshopinfo()
					}

				})
			},
			// 取消时间
			cancelshouCang() {
				let data = {
					type: 10,
					type_id: this.id
				}
				uni.showLoading({
					mask: true
				})
				this.$request('user/relation/delete', data).then(res => {
					if (res.status == 400 || res.status == 200) {
						uni.hideLoading()
						this.getshopinfo()
					}

				})
			},
			// 获取更多商品
			getMoreShopping() {

				this.isUpdateClass = false
				this.productSpuSearch.isPush = true
				if (this.productSpuSearch.page) {
					this.productSpuSearch.page += 1
				} else {
					this.productSpuSearch.page = 1
				}
				this.getMerProductSpuList()
			},
			// 去商品详情
			goShopingDetail(id) {
				uni.navigateTo({
					// url: '/pages/client/shop/shop-detail/shop-detail?id=' + id
					url: `/pages/client/shop/shop-detail/shop-detail?id=${id}&mer_id=${this.id}`
				})
			},
			// 切换一级分类
			checkCate(index) {
				console.log('一级切换')
				this.cate3_list = []
				this.cate_active = index
				this.isUpdateClass = true
				this.productSpuSearch.page = 1
				this.productSpuSearch.isPush = false
			},
			// 切换二级分类
			checkCate2(index) {

				this.cate2_active = index
				this.isUpdateClass = true
				this.productSpuSearch.page = 1
				this.productSpuSearch.isPush = false
				// this.cate3_list = []
			},
			// 排序
			checkCate3(index) {
				let choose = this.cate3[this.cate3_active];
				let index2 = index == 0 ? 1 : 0
				this.productSpuSearch.page = 1
				this.productSpuSearch.isPush = false
				this.cate3[index2].status = 0 //将另外一个复原
				if (this.cate3[index].status == 0) {
					this.cate3[index].status = 1
				} else if (this.cate3[index].status == 1) {
					this.cate3[index].status = 2
				} else {
					this.cate3[index].status = 1
				}
				if (index != this.cate3_active) {
					this.cate3_active = index
				}
				this.getcate3()
			},
			/**
			 * 获取商户商品spu
			 */
			getMerProductSpuList(isOnAdd) {
				console.log(isOnAdd, 'isOnAddisOnAddisOnAdd')
				this.productStatus = 'loading'
				getMerchantProductSpuListApi(this.id, this.productSpuSearch).then(res => {
					if (res.data.list.length) {
						this.productStatus = 'loadmore'
					} else {
						this.productStatus = 'nomore'
					}

					res.data.list.forEach(item => {
						item.cartnum = 0
					})
					this.getcartlist(res.data.list, isOnAdd)
					if (!res.data.list.length) {
						uni.hideLoading()
					}
				}).catch(err => {

				})
			}

		},
		// 购物车减
		cartDel(id, index) {
			console.log('减少', id);
			let num = this.list2[index].buy_num;
			if (num > 1) {
				num = num - 1;
			}
		},
		// 购物车加
		cartAdd(id, index) {
			console.log('加');
			this.list2[index].buy_num + 1;
			this.$forceUpdate();
			// num=num+1;
			console.log(this.list2[index].buy_num);

		}

	}
</script>

<style lang="scss" scoped>
	.box {
		.sc2 {
			.scroll {
				height: calc(100vh - 143rpx - 352rpx - 66rpx);
				// height: 800rpx;
			}

			.list2 {
				padding: 0 20rpx 100rpx;

				.card {
					height: 250rpx;
					border-bottom: 1rpx solid #eee;

					.card-img {
						flex-shrink: 0;
						width: 190rpx;
						height: 190rpx;

						image {
							@extend .myimg;
							border-radius: 12rpx;
						}
					}

					.card-right {
						position: relative;
						flex: 1;
						margin-left: 15rpx;
						min-height: 190rpx;
						overflow: hidden;

						.one {
							width: 356rpx;
						}

						.two {
							margin: 10rpx 0;
							color: #666;
							font-size: 22rpx;
						}

						.three {
							width: auto;
							height: 32rpx;
							display: inline-block;
							line-height: 32rpx;
							text-align: center;
							font-size: 20rpx;
							padding: 0 10rpx;
							color: #AF1919;
							background: rgba(16, 156, 122, 0);
							border: 1rpx solid #AF1919;
						}

						.four {
							position: absolute;
							right: 0;
							bottom: 0;
							width: 356rpx;
							height: 40rpx;

							.price1 {
								color: #F83535;
							}

							.price2 {
								margin-left: 10rpx;
								color: #999;
								font-size: 26rpx;
								text-decoration: line-through;
							}

							.cart1 {
								input {
									width: 60rpx;
									font-weight: 600;
									text-align: center;
								}

								.cart1-jian,
								.cart1-add {
									width: 40rpx;
									height: 40rpx;

									image {
										@extend .myimg;
									}
								}
							}
						}
					}
				}
			}
		}

		.myimg {
			width: 100%;
			height: 100%;
		}

		.color {
			color: #109C7A;
		}

		.tag1 {
			margin-right: 10rpx;
			color: #fff;
			font-size: 22rpx;
			padding: 2rpx 8rpx;
			background: linear-gradient(0deg, #FF3B38 0%, #FA5F3D 100%);
			border-radius: 4rpx;
		}

		.tag2 {
			margin-right: 10rpx;
			color: #F83535;
			font-size: 22rpx;
			padding: 2rpx 8rpx;
			background: #FFF2F2;
			border: 1rpx solid #FFCDCD;
			border-radius: 4rpx;
		}

		.head {
			height: 480rpx;
			padding: 26rpx 30rpx 0;
			background: #109C7A;
			background: linear-gradient(180deg, #109C7A 0%, rgba(16, 156, 122, 0) 100%);

			.input {
				width: 580rpx;
				height: 68rpx;
				background: #F3F3F3;
				border-radius: 34rpx;

				.input-img {
					margin: 0 14rpx 0 26rpx;
					width: 30rpx;
					height: 30rpx;

					image {
						@extend .myimg
					}
				}

				input {
					width: 386rpx;
					font-size: 26rpx;
				}

				.input-btn {
					width: 120rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					font-size: 26rpx;
					color: #fff;
					background: linear-gradient(64deg, #2BCCA5, #22B591);
					border-radius: 30rpx;
				}
			}

			.lingquan {
				margin-left: 40rpx;
				height: 68rpx;
				font-size: 26rpx;
				text-align: center;
				color: #fff;

				.head-img {
					margin: 4rpx auto 0;
					width: 37rpx;
					height: 31rpx;
					margin-bottom: 4rpx;

					image {
						@extend .myimg
					}
				}
			}
		}

		.content {
			position: fixed;
			left: 0;
			top: 134rpx;
			width: 750rpx;
			height: calc(100vh - 143rpx);
			background: #FFFFFF;
			border-radius: 30rpx 30rpx 0 0;
			z-index: 11;
			box-sizing: border-box;

			.top {
				padding: 30rpx;

				.top-img {
					flex-shrink: 0;
					width: 120rpx;
					height: 120rpx;

					image {
						@extend .myimg;
						border-radius: 12rpx;
					}
				}

				.top-right {
					min-height: 120rpx;
					position: relative;
					flex: 1;
					margin-left: 12rpx;

					.top-two {
						margin: 12rpx 0;
					}

					.top-three {
						flex-wrap: wrap;
					}

					.icon1 {
						margin: 0 15rpx;
						width: 1rpx;
						height: 20rpx;
						background-color: #666666;
					}

					.collection {
						position: absolute;
						top: 0;
						right: 0;
						width: 41rpx;
						height: 36rpx;

						image {
							@extend .myimg;
						}
					}
				}
			}

			// 分类
			.cate {
				padding: 24rpx 30rpx;
				background-color: #F6F6F6;
				overflow-x: auto;

				&>view {
					flex-shrink: 0;
					font-size: 24rpx;
					text-align: center;

					.cate-img {
						margin: 0 auto 6rpx;
						width: 84rpx;
						height: 84rpx;

						image {
							@extend .myimg;
							border-radius: 50%;
						}
					}
				}

				&>view:not(:first-child) {
					margin-left: 40rpx;
				}

				.cateColr {
					color: #109C7A;
				}
			}

			// 分类信息
			.list {
				width: 750rpx;
				height: calc(100vh - 143rpx - 352rpx);
				overflow: hidden;

				.cate2 {
					width: 150rpx;
					height: calc(100vh - 143rpx - 352rpx);
					flex-shrink: 0;
					font-size: 26rpx;
					background: #F6F6F6;
					overflow-y: auto;

					&>view {
						position: relative;
						width: 150rpx;
						height: 110rpx;
						line-height: 110rpx;
						padding-left: 26rpx;
						text-align: left;
						border-bottom: 1rpx solid #eee;
						background: #F6F6F6;
						box-sizing: border-box;

						.bg {
							position: absolute;
							left: 0;
							top: 50%;
							transform: translateY(-50%);
							width: 8rpx;
							height: 30rpx;
							background: #F6F6F6;
							border-radius: 0rpx 4rpx 4rpx 0rpx;
						}
					}

					.cate2Color {
						background-color: #fff;
						font-weight: bold;

						.bg {
							background: #109C7A;
						}
					}

				}

				.msg {
					flex: 1;
					height: calc(100vh - 143rpx - 352rpx);
					overflow: hidden;

					.msg-head {
						padding: 28rpx 0 8rpx 20rpx;
						font-size: 26rpx;

						&>view {
							margin-right: 60rpx;
						}

						.msg-head-img {
							margin-left: 6rpx;

							.shang {
								margin-bottom: 6rpx;
							}
						}

						image {
							width: 15rpx;
							height: 9rpx;
						}
					}

					.scroll {
						height: calc(100vh - 143rpx - 352rpx - 66rpx);
						// height: 800rpx;
					}

					.list2 {
						padding: 0 20rpx 100rpx;

						.card {
							height: 250rpx;
							border-bottom: 1rpx solid #eee;

							.card-img {
								flex-shrink: 0;
								width: 190rpx;
								height: 190rpx;

								image {
									@extend .myimg;
									border-radius: 12rpx;
								}
							}

							.card-right {
								position: relative;
								flex: 1;
								margin-left: 15rpx;
								min-height: 190rpx;
								overflow: hidden;

								.one {
									width: 356rpx;
								}

								.two {
									margin: 10rpx 0;
									color: #666;
									font-size: 22rpx;
								}

								.three {
									width: auto;
									height: 32rpx;
									display: inline-block;
									line-height: 32rpx;
									text-align: center;
									font-size: 20rpx;
									padding: 0 10rpx;
									color: #AF1919;
									background: rgba(16, 156, 122, 0);
									border: 1rpx solid #AF1919;
								}

								.four {
									position: absolute;
									right: 0;
									bottom: 0;
									width: 356rpx;
									height: 40rpx;

									.price1 {
										color: #F83535;
									}

									.price2 {
										margin-left: 10rpx;
										color: #999;
										font-size: 26rpx;
										text-decoration: line-through;
									}

									.cart1 {
										input {
											width: 60rpx;
											font-weight: 600;
											text-align: center;
										}

										.cart1-jian,
										.cart1-add {
											width: 40rpx;
											height: 40rpx;

											image {
												@extend .myimg;
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>
